<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
	</head>
	<style>
		*{ margin: 0px; padding: 0px;}
	</style>
	<body>
		<canvas id="myCanvas" style="background: #000000;"></canvas>
	</body>
</html>
<script src="utils.js"></script>
<script src="ball.js"></script>
<script>
	
	
	var canvas = document.getElementById('myCanvas');
	var ctx = canvas.getContext('2d');
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	var centerX = canvas.width/2;
	var centerY = canvas.height/2;
	
	var mouse = utils.captureMouse(canvas);
	
	var arrow = new Ball();
	arrow.x = centerX;
	arrow.y = centerY;
	var speed = 2;
	
	(function drawFrame(){
		window.requestAnimationFrame(drawFrame, canvas);
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		
		
		arrow.draw(ctx);
	}())
	
	
	
</script>
